<template>
  <div>
    <p>ExtElInput</p>
    <ext-el-input v-model="input" placeholder="测试输入"></ext-el-input>
    <ext-el-button @click="input = '100'">赋值</ext-el-button>
    <p>ExtElDialog</p>
    <ext-el-button @click="dialogVisible = true">对话框</ext-el-button>
    <ext-el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </ext-el-dialog>
     <ext-el-checkbox
     :indeterminate="isIndeterminate"
      v-model="checkAll"
      @change="handleCheckAllChange">全选</ext-el-checkbox>
    <ext-el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
      <ext-el-checkbox v-for="city in cities" :label="city" :key="city">{{ city }}</ext-el-checkbox>
    </ext-el-checkbox-group>
  </div>
</template>

<script>
export default {
  name: 'TestElement',
  components: {},
  data() {
    return {
      input: '',
      dialogVisible: false,
      checkedCities: ['上海', '北京'],
      cities: ['上海', '北京', '广州', '深圳'],
      checkAll: false,
      isIndeterminate: true,
    };
  },
  watch: {
    input(val) {
      console.log('view-input', val);
    },
    dialogVisible(val) {
      console.log('view-dialogVisible', val);
    },
  },
  methods: {
    handleCheckAllChange(value) {
      console.log(value);
    },
    handleCheckedCitiesChange(value) {
      console.log(value);
    },
  },
};
</script>

<style lang="scss" scoped></style>
